<template>
  <a-card :visible="visible" style="margin: 20px">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" slot="detail">
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="机构名称">
          <a-input placeholder="" v-model="model.departName"/>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
          <a-tree-select
            disabled
            style="width:100%;"
            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
            :treeData="treeData"
            v-model="model.parentId"
            placeholder="无">
          </a-tree-select>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="机构编码"
        >
          <a-input placeholder="" v-model="model.orgCode" disabled/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="机构类型">
          <a-radio-group disabled v-model="model.orgCategory">
            <a-radio value="1">
              公司
            </a-radio>
            <a-radio value="2">
              部门
            </a-radio>
            <a-radio value="3">
              岗位
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序">
          <a-input-number v-model="model.departOrder"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="手机号">
          <a-input placeholder="" v-model="model.mobile"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="地址">
          <a-input placeholder="" v-model="model.address"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注">
          <a-textarea placeholder="" v-model="model.memo"/>
        </a-form-model-item>
        <div class="anty-form-btn">
          <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
          <a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button>
        </div>
      </a-form-model>
    </j-form-container>
  </a-card>
</template>
<script>
  import { queryIdTree } from '@/api/api'
  import { httpAction } from '@/api/manage'

  export default {
    name: 'DeptBaseInfo',
    data() {
      return {
        model: {},
        oriModel: {},
        visible: false,
        treeData: [],
        labelCol: {
          xs: {span: 24},
          sm: {span: 3}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
        url: {
          edit: '/sys/sysDepart/edit',
        }
      }
    },
    created() {
      this.loadTreeData();
    },
    computed: {
      //一级菜单不允许编辑
      formDisabled(){
        return (this.model && this.model.parentId) ? false : true
      }
    },
    methods: {
      loadTreeData() {
        this.treeData = [];
        queryIdTree().then((res) => {
          if (res.success) {
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i];
              this.treeData.push(temp);
            }
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      open(record) {
        this.visible = true;
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.model = Object.assign({}, record)
          this.oriModel = Object.assign({}, record)
        })
      },
      emptyCurrForm() {
        this.model = this.oriModel;
        this.$refs.form.resetFields()
      },
      submitCurrForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            if (!this.model.id) {
              this.$message.warning('请点击选择要修改部门!')
              return
            }
            httpAction(this.url.edit, this.model, 'put').then((res) => {
              if (res.success) {
                this.$message.success('保存成功!')
                this.$emit('ok');
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';

  .anty-form-btn {
    width: 100%;
    text-align: center;
  }

  .anty-form-btn button {
    margin: 0 5px;
  }
</style>